<template>
  <el-dialog v-model="deleteVisible" :title="data.length > 1 ? '批量删除' : '删除'" title-align="start" @close="handleClose"
    width="400px">

    <el-alert type="warning" style="margin-bottom: 16px;" v-if="data.length > 1">您正在批量删除，请确认删除数据是否正确</el-alert>
    <el-space>
      <span>摘要</span>
      <el-tag v-for="item in data" :key="item" type="warning">{{item}}</el-tag>
    </el-space>

    <template #footer>
      <el-button @click="handleClose" icon="Close">取消</el-button>
      <el-button type="primary" @click="handleConfirm" icon="Check">确认</el-button>
    </template>
  </el-dialog>
</template>
  
<script setup>
  import { ref, reactive, toRefs, watch, unref, getCurrentInstance } from 'vue';
  
  const { proxy } = getCurrentInstance();
  const modalFormRef  = ref(null);
  const props = defineProps({
    // 数组名称
    data: {
      type: Array,
    },
    // 是否显示
    visible: {
      type: Boolean,
      default: false,
    },
    // 更新接口
    apiDelete: {
      type: Function,
    },
  });
  
  const { data, visible, apiDelete } = toRefs(props);
  
  const emits = defineEmits(['deleteVisibleChange']);
  
  // Akiraka 20230210 对话框弹出
  const deleteVisible = ref(false);
  
  // Akiraka 20230210 删除数据校验
  const rules = reactive({
    deleteConfirmation: [
      {
        required: true,
        asnycValidator: (rule,value) => {
          return new Promise((resolve,reject) => {
            setTimeout(() => {
              if ( "DELETE" !== value) {
                reject('请输入 DELETE')
              }else{
                resolve()
              }
            }, 500)
          })
        } 
      }
    ],
  });
  
  // Akiraka 20230210 关闭弹窗
  const handleClose = () =>  {
    emits('deleteVisibleChange', deleteVisible.value = false);
    // Akiraka 20230210 关闭弹窗
    deleteVisible.value = false;
  }
  
  // Akiraka 20230210 监听事件
  watch(() => props.visible,(value) => {
    if (value) {
      // Akiraka 20230210 打开或关闭对话框
      deleteVisible.value = value;
    }
  })
  
  // Akiraka 20230210 确认按钮 => 开始数据检查
  const handleConfirm = () => {
    // modalFormRef.value.validate((valid) => {
    //   if (valid) {
        // Akiraka 20230210 请求接口

        props.apiDelete({ ids: data.value }).then(response => {
          // Akiraka 20230210 关闭弹窗
          deleteVisible.value = false;
          proxy.$message.success("数据删除成功");
        })
    //   }
    // })
  }
  
  </script>
  
<style lang="less" scoped></style>